<template>
  <!--
    查：
      1：定义api
      2:导入api
      3:进入页面调用api
      4：存留数据并渲染
      5：与分页建立关联
         页码
         页容量
         total
         修改页码时要重新调用接口

    增：
      1：创建新增弹框组件
      2：在父组件导入注册使用（点击打开弹框）
      3：完成布局
      4：表单验证
      5：定义新增api
      6:导入新增api
      7:点击确定在表单验证通过后调用
        调用成功
          a:提示
          b:关闭弹框
          c:清空表单数据与验证
          d:刷新父级列表数据

    删：
      1：点击删除弹出确定框
      2：定义删除api
      3:导入删除api
      4:点击确定框确定调用删除api
      5:调用成功
         a:提示
         b:刷新列表
            解决方案1：页码=1  再刷新
            解决方案2: 条件：页码>1 且 当前页只有一条数据 刷新前页码-- 再刷新

     改：
      1：点击修改打开弹框
      2：回显数据（包含深拷贝,不包含要调用接口获取完整数据）
      3：弹框组件定义一个mode用于区分新增与编辑（新增与编辑打开弹框都要修改mode）
      4:标题调整
      5:如果有表单验证调用还需要调整下
      6：定义编辑api
      7:导入编辑api
      8:点击确定分场景调用api
      9:调用成功
        a:提示
        b:关闭弹框
        c:刷新列表数据

     给角色分配权限数据（没有新增的编辑）
     1：创建弹框组件
     2：导入注册使用（点击分配权限打开弹框）
     3：弹框布局
     4：获取权限数据进行渲染
     5：回显已有权限数据
     6：定义修改权限数据api
     7:导入修改权限数据api
     8:点击确定调用相应api
      调用完成
        a:提示
        b:关闭弹框
        c:清空已勾选
        d:刷新父级列表（看父级有没有展示该数据）

 -->

  <div class="setting">
    <el-card>
      <el-tabs>
        <el-tab-pane label="角色管理">
          <el-button type="primary" @click="addEvent">新增角色</el-button>
          <el-table :data="list" class="table" border>
            <!-- <el-table-column label="序号" type="index" width="80px" align="center" /> -->
            <el-table-column label="序号" width="80px" align="center">
              <template #default="{$index}">
                <div>
                  {{ (page.page-1)*page.pagesize+$index+1 }}
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="名称" align="center" />
            <el-table-column prop="description" label="描述" align="center" />
            <el-table-column label="操作" align="center">
              <template #default="{row}">
                <el-button type="success" @click="setEvent(row)">分配权限</el-button>
                <el-button type="primary" @click="editEvent(row)">编辑</el-button>
                <el-button type="danger" @click="delEvent(row.id)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
          <div class="page">
            <!-- {{ page }} -->
            <!-- <el-pagination
              :current-page.sync="page.page"
              :page-size.sync="page.pagesize"
              layout="sizes,prev, pager, next"
              :page-sizes="[1,2,3,5,10,50,100,200]"
              :total="total"
              @current-change="getData"
              @size-change="getData"
            /> -->
            <el-pagination
              :current-page.sync="page.page"
              :page-size.sync="page.pagesize"
              layout="prev, pager, next"
              :total="total"
              @current-change="getData"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" lazy>
          <Info />
        </el-tab-pane>

      </el-tabs>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 分配权限弹框 -->
    <SetPermission ref="set" />
  </div>
</template>
<script>
import { sysRole, sysRoleDelete } from '@/api/setting'
import Add from './components/Add.vue'
// import Info from './components/Info.vue'
import SetPermission from './components/SetPermission'
export default {
  components: {
    Add,
    // 异步组件
    Info: () => import('./components/Info.vue'),
    SetPermission
  },
  data() {
    return {
      list: [],
      page: {
        page: 1,
        pagesize: 10
      },
      total: 50
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysRole(this.page)
      this.list = res.data.rows
      this.total = res.data.total
      console.log('角色列表', res)
    },
    // 新增事件
    addEvent() {
      // 打开弹框
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 删除事件
    async delEvent(id) {
      await this.$confirm('您确定删除该项吗')
      await sysRoleDelete(id)
      this.$message.success('删除成功')
      // 刷新列表
      // this.page.page = 1
      if (this.page.page > 1 && this.list.length === 1) {
        this.page.page--
      }
      this.getData()
    },
    // 编辑事件
    editEvent(row) {
      // 打开弹框
      this.$refs.add.isShow = true
      // 回显数据
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.mode = 'edit'
      console.log(row)
    },
    // 分配权限点击事件
    setEvent(row) {
      // 打开弹框
      this.$refs.set.isShow = true
      // 获取权限列表数据
      this.$refs.set.getData()
      // 获取角色详情
      this.$refs.set.getRoleInfo(row.id)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting{
  padding:20px;
  .table{
    margin-top:20px;
  }
}
.page{
  text-align: center;
  padding-top:20px;
}

</style>
